<template>
    <div class="divider">
        <h2 :style="titleStyle"><img src="@/assets/images/icon-divider.png">&nbsp;&nbsp;{{title}}</h2>
        <div class="right">
            <slot name="button"></slot>
        </div>
        <div class="right" v-if="number">
            <span style="color: #999999">已传数量{{number}}张</span>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'divider',
        props: {
            title: {
                default: '',
                type: String
            },
            number: {
                default: '',
                type: String
            },
            titleColor: {
                defaulet: '#1B65B9',
                type: String
            }
        },
        data () {
            return {
                titleStyle: {
                    color: '#333333'
                }
            }
        }
    }
</script>
<style scoped>
    .divider {
        position: relative;
        height: 35px;
        border-bottom: 1px solid #ECF5FF;
        margin-bottom: 15px;
        h2 {
            color: #333333;
            font-size: 16px;

            img {
                margin-right: 10px;
            }
        }

        .right {
            color: #1B65B9;
            float: right;
            position: absolute;
            right: 0;
            top: -5px;
        }
    }
</style>
